<template>
  <view class="container">
    <view class="header">
      <text class="title">小富AI助手</text>
      <text class="desc">为您提供职场相关的智能问答服务</text>
    </view>
    
    <view class="chat-container">
      <view class="messages" ref="messagesContainer">
        <!-- 欢迎消息 -->
        <view class="message ai-message">
          <image src="/static/images/ai-avatar.png" mode="widthFix" class="avatar"></image>
          <view class="message-content">
            <text>您好！我是小富AI助手，很高兴为您服务。请问有什么职场相关的问题需要帮助吗？例如：</text>
            <view class="suggestions">
              <text class="suggestion" @click="sendSuggestion('帮我分析一下字节跳动的公司文化')">帮我分析一下字节跳动的公司文化</text>
              <text class="suggestion" @click="sendSuggestion('如何判断一家公司是否值得加入')">如何判断一家公司是否值得加入</text>
              <text class="suggestion" @click="sendSuggestion('面试时应该问哪些问题')">面试时应该问哪些问题</text>
            </view>
          </view>
        </view>
        
        <!-- 消息列表 -->
        <view class="message" :class="message.isAi ? 'ai-message' : 'user-message'" 
          v-for="(message, index) in messages" :key="index">
          <image :src="message.isAi ? '/static/images/ai-avatar.png' : '/static/images/user-avatar.png'" 
            mode="widthFix" class="avatar"></image>
          <view class="message-content">
            <text>{{ message.content }}</text>
          </view>
        </view>
        
        <!-- 加载中 -->
        <view class="message ai-message" v-if="isLoading">
          <image src="/static/images/ai-avatar.png" mode="widthFix" class="avatar"></image>
          <view class="message-content loading">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
      
      <!-- 输入区域 -->
      <view class="input-area">
        <textarea 
          v-model="inputMessage" 
          class="input" 
          placeholder="请输入您的问题..."
          @confirm="sendMessage"
          :auto-height="true"
          maxlength="500"></textarea>
        <button class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim() || isLoading">
          <uni-icons type="send" size="20" color="#fff"></uni-icons>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      isLoading: false,
      // 模拟AI回复的内容库
      aiResponses: {
        '字节跳动': '字节跳动以"始终创业"和"开放谦逊"为核心价值观，公司文化强调"Context, not Control"（情境管理而非控制），鼓励员工独立思考和快速行动。工作节奏较快，但薪资福利具有竞争力，适合有较强抗压能力和成长意愿的人。',
        '公司文化': '公司文化是一个组织的价值观、信念和行为准则的集合。判断一家公司的文化是否适合自己，可以从以下几个方面入手：1）观察员工的工作状态和互动方式；2）了解公司的决策流程；3）关注公司对员工成长的支持；4）了解公司的核心价值观是否与自己契合。',
        '值得加入': '判断一家公司是否值得加入，可以考虑以下因素：1）行业前景和公司发展阶段；2）薪资福利水平；3）工作内容是否与个人职业规划匹配；4）团队氛围和管理风格；5）个人成长空间；6）工作与生活的平衡。建议多渠道了解真实信息，包括在职员工评价、行业报告等。',
        '面试问题': '面试时除了回答面试官的问题，也应该主动提问，这不仅能帮你了解公司，也能展示你的积极性。推荐问这些问题：1）这个岗位的主要职责和目标是什么？2）团队目前面临的最大挑战是什么？3）公司对这个岗位的期望是什么？4）团队的工作风格是怎样的？5）这个岗位的晋升路径是什么？',
        '默认': '感谢您的提问。基于我了解到的信息，职场发展需要综合考虑个人能力提升、行业趋势和公司文化等多方面因素。建议您根据自身情况制定清晰的职业规划，并保持持续学习的心态。如果您有更具体的问题，我会尽力为您解答。'
      }
    };
  },
  onLoad() {
    // 页面加载时的初始化操作
  },
  methods: {
    sendMessage() {
      const message = this.inputMessage.trim();
      if (!message) return;
      
      // 添加用户消息
      this.messages.push({
        content: message,
        isAi: false
      });
      
      this.inputMessage = '';
      this.isLoading = true;
      
      // 滚动到底部
      this.scrollToBottom();
      
      // 模拟AI回复延迟
      setTimeout(() => {
        // 根据关键词选择回复
        let response = this.aiResponses.default;
        for (const key in this.aiResponses) {
          if (key !== 'default' && message.includes(key)) {
            response = this.aiResponses[key];
            break;
          }
        }
        
        // 添加AI回复
        this.messages.push({
          content: response,
          isAi: true
        });
        
        this.isLoading = false;
        this.scrollToBottom();
      }, 1500);
    },
    sendSuggestion(text) {
      this.inputMessage = text;
      this.sendMessage();
    },
    scrollToBottom() {
      // 等待DOM更新后再滚动
      this.$nextTick(() => {
        const container = this.$refs.messagesContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  padding: 20px 15px;
  background-color: #36D;
  color: #fff;
  text-align: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.desc {
  font-size: 14px;
  margin-top: 5px;
  opacity: 0.9;
  display: block;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
}

.message {
  display: flex;
  margin-bottom: 15px;
  max-width: 100%;
}

.ai-message {
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.ai-message .avatar {
  margin-right: 10px;
}

.user-message .avatar {
  margin-left: 10px;
}

.message-content {
  max-width: 75%;
  padding: 10px 15px;
  border-radius: 18px;
  line-height: 1.6;
  font-size: 14px;
}

.ai-message .message-content {
  background-color: #fff;
  color: #333;
  border-top-left-radius: 5px;
}

.user-message .message-content {
  background-color: #36D;
  color: #fff;
  border-top-right-radius: 5px;
  text-align: right;
}

.suggestions {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.suggestion {
  font-size: 13px;
  color: #36D;
  padding: 5px 0;
  cursor: pointer;
  text-decoration: underline;
  display: block;
}

.input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #eee;
}

.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #36D;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.send-btn:disabled {
  background-color: #ccc;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  animation: loading 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>
